import React, { Component, lazy } from 'react';
import { NavLink, Route, Switch, Redirect } from 'react-router-dom'
// import MyTabbar from '../components/MyTabbar/MyTabbar'
import '../styles/home.scss'
var Shop = lazy(() => import('./home/shop'))
var Assort = lazy(() => import('./home/classify'))
var Commodity = lazy(() => import('./home/commodity'))
var ShoppingCart = lazy(() => import('./home/shoppingCart'))
var Personal = lazy(() => import('./home/personal'))
var NotFound = lazy(() => import('./notfound'))

class Home extends Component {

    render() {
        return ( 
            <div className='home'>
                <Switch>
                    <Route exact path="/home/shop" component={Shop} /> 
                    <Route exact path='/home/classify' component={Assort} />
                    <Route exact path='/home/commodity' component={Commodity} />
                    <Route exact path='/home/shoppingCart' component={ShoppingCart} />
                    <Route exact path='/home/personal' component={Personal} />
                    <Redirect exact from='/home' to="/home/shop" />
                    <Route path="*" component={NotFound} />
                </Switch>
                <div className='tabbar'>
                    <NavLink exact to="/home/shop">
                        <i className='iconfont icon-shouye-shouye'></i>
                        <p>店铺</p>
                    </NavLink>
                    <NavLink to='/home/classify'>
                        <i className='iconfont icon-fenlei'></i>
                        <p>分类</p>
                    </NavLink>
                    <NavLink to='/home/commodity'>
                        <i className='iconfont icon-quanbu'></i>
                        <p>全部商品</p>
                    </NavLink>
                    <NavLink to='/home/shoppingCart'>
                        <i className='iconfont icon-gouwuche'></i>
                        <p>购物车</p>
                    </NavLink>
                    <NavLink to='/home/personal'>
                        <i className='iconfont icon-tubiao_gerenzhongxin-'></i>
                        <p>个人中心</p>
                    </NavLink>
                </div>
            </div>
            
        );
    }
}

export default Home;